<script>
const cityOptions = ["首页", "订单管理", "信息中心", "权限管理"];
import { getPage, addPage, delPage, putPage } from "@/api/user";
export default {
  data() {
    return {
      putDialog: false,
      checkAll: false,
      checkedCities: ["首页", "订单管理"], //默认勾选
      cities: cityOptions,
      isIndeterminate: true,
      roleForm: {}, //添加表格
      roleId: null, // 点击的id
      selectCheck: [], // 用来记录当前角色所拥有的权限
      permData: [
        {
          code: "employees",
          description: "用户管理菜单",
          enVisible: "1",
          id: "604f7df5f900be1850edb152",
          name: "员工管理",
          pid: "0",
          type: 1,
        },
        {
          code: "settings",
          description: "公司设置菜单",
          enVisible: "1",
          id: "604f7e07f900be1850edb153",
          name: " 公司设置",
          pid: "0",
          type: 1,
        },
        {
          code: "aa",
          description: "aa",
          enVisible: "1",
          id: "6050175b140b332e04cced02",
          name: "测试",
          pid: "604f7df5f900be1850edb152",
          type: 2,
        },
        {
          code: "12",
          description: "12",
          enVisible: "0",
          id: "623bdc43c2722f5453c15288",
          name: "122525",
          pid: "604f7df5f900be1850edb152",
          type: null,
        },
      ], // 用来存储树形图的数据
      selectChech: [], // 用来记录当前角色拥有的权限
      showPermDialog: false, // 权限表格弹出
      FormA: {
        companyName: "",
        cominUserId: "",
        companyDescribe: "",
        companyRrole: "",
      },
      companyId: "",
      rules: {
        cominUserId: [
          { required: true, message: "管理员ID不能为空", trigger: "blur" },
        ],
        companyName: [
          { required: true, message: "公司名字不能为空", trigger: "blur" },
          { min: 1, max: 50, message: "要求1-50个字符", trigger: "blur" },
        ],
        companyDescribe: [
          { required: true, message: "角色描述不能为空", trigger: "blur" },
          { min: 4, max: 10, message: "4到10位描述", trigger: "blur" },
          {
            required: true,
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: "格式:为汉字",
            trigger: "blur",
          },
        ],
        companyRrole: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
          {
            required: true,
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: "格式:为汉字",
            trigger: "blur",
          },
        ],
        // 名称
        name: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
          {
            required: true,
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: "格式:为汉字",
            trigger: "blur",
          },
        ],
        // 描述
        description: [
          { required: true, message: "角色描述不能为空", trigger: "blur" },
          { min: 4, max: 10, message: "4到10位描述", trigger: "blur" },
          {
            required: true,
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: "格式:为汉字",
            trigger: "blur",
          },
        ],
        // 公司名字
        usname: [
          { required: true, message: "公司名字不能为空", trigger: "blur" },
          { min: 1, max: 50, message: "要求1-50个字符", trigger: "blur" },
        ],
        id: [
          { required: true, message: "管理员ID不能为空", trigger: "blur" },
          { min: 1, max: 50, message: "要求1-50个字符", trigger: "blur" },
        ],
      },
      tableData: [], // 员工信息,
      page: {
        // 放置页码及相关数据
        page: 1,
        pagesize: 20,
        total: 0, // 记录总数
      },
      showDialog: false, // 弹窗
    };
  },
  created() {
    this.getsetting();
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 获取公司权限设置
    async getsetting() {
      const res = await getPage();
      this.tableData = res.data;
    },
    // 添加确定按钮
    btnOK() {
      this.$refs.roleForm.validate((isOK) => {
        if (isOK) {
          const formData = new FormData();
          formData.append("company_name", this.roleForm.usname);
          formData.append("admin_user_id", this.roleForm.id);
          formData.append("company_role", this.roleForm.name);
          formData.append("company_describe", this.roleForm.description);
          addPage(formData)
            .then((res) => {
              this.$message.success(res.msg);
              this.roleForm = {};
              this.getsetting();
              this.showDialog = false;
            })
            .catch((error) => {});
        }
      });
    },
    // 添加取消按钮
    btnCancel() {
      this.showDialog = false;
      this.$refs.roleForm.resetFields();
    },
    // 删除按钮
    deleteRole(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delPage(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getsetting();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑
    addButton(res) {
      this.FormA.companyRrole = res.company_role;
      this.FormA.companyDescribe = res.company_describe;
      this.FormA.companyName = res.company_name;
      this.FormA.cominUserId = res.admin_user_id;
      this.companyId = res.company_id;
      this.putDialog = true;
    },
    // 编辑确认
    putAdd() {
      if (
        this.$refs.bbb.value &&
        this.$refs.ccc.value &&
        this.$refs.ddd.value &&
        this.$refs.aaa.value != ""
      ) {
        const formData = new FormData();
        formData.append("company_name", this.$refs.bbb.value);
        formData.append("admin_user_id", this.$refs.ccc.value);
        formData.append("company_role", this.$refs.ddd.value);
        formData.append("company_describe", this.$refs.aaa.value);

        putPage(formData, this.companyId).then((res) => {
          this.tableData.slice(0, -1).push(res.data);
          this.getsetting();
          this.putDialog = false;
          this.$message.success(res.success_msg);
        });
      } else {
        this.$message.success("输入信息不能为空，请重新输入");
        this.putDialog = false;
      }
    },
    // 编辑取消
    putCancel() {
      this.putDialog = false;
      this.$refs.FormA.resetFields();
    },
    // 复选按钮添加
    addBtn() {},
    // 控制分页
    changePage(page) {
      // this.page.page = page
      // this.getsetting()
    },
    // 复选框确定按钮
    btnPermOK() {},
    // 取消按钮
    btnPermCancel() {
      this.selectChech = []; // 重置数据
      this.showPermDialog = false;
    },
    // 点击分配权限按钮
    assingPerms() {
      // id是用来查询当前的角色到底有哪些权限
      // this.roleId = id
      // // 获取所有权限的数据  转换为树形数据
      // this.permData = transList(await getPermissionList(), '0')
      // // permIds是当前用户所拥有的权限点数据
      // const { permIds } = await getRoleDetail(id)
      // this.selectChech = permIds // 赋值
      this.showPermDialog = true;
    },
  },
};
</script>
<template>
  <div class="dashboard-container">
    <!-- 按钮 -->
    <el-button type="primary" @click="showDialog = true">新增角色</el-button>
    <!-- 表格 -->
    <template>
      <!-- 序号 -->
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="company_id" label="序号" width="80" />
        <!-- 角色 -->
        <el-table-column prop="company_role" label="角色" width="100" />
        <!-- 描述 -->
        <el-table-column prop="company_describe" label="描述" width="80" />
        <el-table-column prop="company_name" label="公司名字" width="80" />
        <el-table-column prop="admin_user_id" label="管理员ID" width="80" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button size="small" type="success" @click="assingPerms(row.id)"
              >分配权限</el-button
            >
            <el-button size="small" type="primary" @click="addButton(row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="deleteRole(row.company_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页 -->
    <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-pagination
        :current-page="page.page"
        :page-size="page.pagesize"
        :total="page.total"
        layout="prev, pager, next"
        @change="changePage"
      />
    </el-row>
    <!-- 权限 -->
    <el-dialog
      title="分配权限"
      :visible="showPermDialog"
      :close-on-click-modal="false"
    >
      <!-- 放置树形组件和确认按钮 -->
      <!-- data props  -->
      <!-- 如果你想要复选 勾选框 您得设置一个字段 node-key 唯一标识-->
      <el-tree
        ref="permTree"
        :data="permData"
        :props="{ label: 'name' }"
        :default-checked-keys="selectCheck"
        check-strictly
        default-expand-all
        show-checkbox
        node-key="id"
      />
      <!-- 确定和取消按钮 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="btnPermOK"
            >确定</el-button
          >
          <el-button size="small" @click="btnPermCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 添加表格 -->
    <el-dialog
      title="添加弹窗"
      :visible="showDialog"
      @close="btnCancel"
      :close-on-click-modal="false"
    >
      <el-form
        ref="roleForm"
        :model="roleForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="roleForm.description" />
        </el-form-item>
        <el-form-item label="公司名字" prop="usname">
          <el-input v-model="roleForm.usname" />
        </el-form-item>
        <el-form-item label="管理员ID" prop="id">
          <el-input v-model="roleForm.id" />
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 修改表格 -->
    <el-dialog
      title="修改弹窗"
      :visible="putDialog"
      @close="putCancel"
      :close-on-click-modal="false"
    >
      <el-form label-width="120px" :rules="rules" ref="FormA" :model="FormA">
        <el-form-item label="角色名称" prop="companyRrole">
          <el-input v-model="FormA.companyRrole" ref="ddd" />
        </el-form-item>
        <el-form-item label="角色描述" prop="companyDescribe">
          <el-input v-model="FormA.companyDescribe" ref="aaa" />
        </el-form-item>
        <el-form-item label="公司名字" prop="companyName">
          <el-input v-model="FormA.companyName" ref="bbb" />
        </el-form-item>
        <el-form-item label="管理员ID" prop="cominUserId">
          <el-input v-model="FormA.cominUserId" ref="ccc" />
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="putCancel">取消</el-button>
          <el-button size="small" type="primary" @click="putAdd"
            >确定</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
